import { useEffect } from "react"
import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import Stats from "three/examples/jsm/libs/stats.module.js";
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-10-19 11:35:36
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-10-20 11:53:26
 * @FilePath: /three-react/src/pages/Base.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

const width = window.innerWidth - 200;
const height = window.innerHeight

function createRender(width, height) {

  // 创建场景
  const scene = new THREE.Scene();
  // 创建相机
  const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1400);
  camera.position.set(0, 0, 400);
  camera.lookAt(0, 0, 0);
  // 创建webgl渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器窗口大小
  renderer.setSize(width, height);
  document.getElementById("container")?.appendChild(renderer.domElement);


  // 创建几何体
  const geometry = new THREE.BoxGeometry(100, 100, 100);
  // 创建基础材质
  const material = new THREE.MeshBasicMaterial({
    color: 0xffff00,
    transparent: true,
    opacity: 0.8,
    side: THREE.DoubleSide, //两面可见 
  });

  // 创建一个网格将几何体和材质组合在一起
  const mesh = new THREE.Mesh(geometry, material);
  // 将组合好的几何体加入到场景中
  scene.add(mesh);
  // 设置相机位置

  const axesHelper = new THREE.AxesHelper(200);
  scene.add(axesHelper)


  // 环境光
  const ambient = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambient);





  const stats = new Stats();
  document.getElementById("container")?.appendChild(stats.domElement);

  // 轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener('change', function () {

  })



  // 实例化一个gui对象
  const gui = new GUI();
  gui.add(mesh.position, 'x', -500, 500);
  gui.add(mesh.position, 'y', -500, 500);
  gui.add(mesh.position, 'z', -500, 500);
  gui.add(ambient, 'intensity', -10, 10)
  gui.add(material, 'opacity', 0, 1)

  // .addColor()生成颜色值改变的交互界面
  gui.addColor({
    color: 0x00ffff,
  }, 'color').onChange(function (value) {
    mesh.material.color.set(value);
  });


  // 参数3数据类型：数组(下拉菜单)
  gui.add({
    scale: 0,
  }, 'scale', [-100, 0, 100]).name('y坐标').onChange(function (value) {
    mesh.position.y = value;
  });


  function animate() {
    requestAnimationFrame(animate)
    // mesh.rotation.x += 0.01;

    // 渲染场景
    renderer.render(scene, camera);
    stats.update();
  }
  animate();
  return renderer
}
export default function Lines() {
  useEffect(() => {
    if (!window.isMounted) {
      createRender(width, height);
      window.isMounted = true;
    }
  }, [])
  return (
    <div id="container"></div>
  )
}